<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="物品类型">
              <j-dict-select-tag v-model="queryParam.type" dictCode="material_type" placeholder="请选择物品类型" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="场地物资名称">
              <a-input v-model="queryParam.name" placeholder="" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="场地物资编码">
              <a-input v-model="queryParam.code" placeholder="" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
            >
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

          <!-- <a-col :md="6" :sm="24">
            <a-button type="primary" @click="handleCreate">申请场地和物资</a-button>
          </a-col> -->
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus" v-has="'Material:add'">新增</a-button>

      <a-button type="primary" icon="import" @click="visibleImport = true" v-has="'Material:edit'">导入</a-button>
      <XImport
        v-model="visibleImport"
        moduleName="material"
        @ok="searchQuery"
        @cancel="visibleImport = false"
      ></XImport>

      <a-dropdown v-if="selectedRowKeys.length > 0" v-has="'Material:delete'">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel" v-has="'Material:delete'"
            ><a-icon type="delete" />批量删除</a-menu-item
          >
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <s-table
      ref="table"
      rowKey="id"
      size="default"
      :scroll="{ x: 1000 }"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data="loadDataList"
      @onSelect="onChange"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleReview(record)">查看</a>
        <a @click="handleEdit(record)" v-has="'Material:edit'" style="margin-left: 10px">编辑</a>
        <a-popconfirm
          v-has="'Material:delete'"
          style="margin-left: 10px"
          title="确定删除?"
          @confirm="() => handleDelete(record.id)"
        >
          <a>删除</a>
        </a-popconfirm>
        <!-- <a style="margin-left:10px" v-if="record.status==1" @click="handleApply(record)">申请</a> -->
      </span>
    </s-table>

    <!-- 物品管理弹窗 -->
    <MaterialModal ref="MaterialModal" @ok="searchQuery" ></MaterialModal>

    <!-- 申请弹窗 -->
    <!-- <MaterialApplyModal ref="MaterialApplyModal" @ok="searchQuery"></MaterialApplyModal> -->
  </a-card>
</template>

<script>
import STable from '@/components/table/'
import XSelectUserByDep from '@/components/extends/XSelectUserByDep'
import XImport from '@/components/extends/XImport.vue'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import { merge } from 'lodash'
import { getMaterials, setMaterial, delMaterial, delMaterials } from '@/api/api'
import { getAction, postAction, deleteAction } from '@/api/manage'
import MaterialModal from './modules/MaterialModal'
import MaterialApplyModal from './modules/MaterialApplyModal'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'TableList',
  components: {
    AInput,
    ATextarea,
    STable,
    XImport,
    XSelectUserByDep,
    JDictSelectTag,
    MaterialModal,
    MaterialApplyModal,
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      visibleImport: false,
      toggleSearchStatus: false,
      form: null,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        actStatus: 10,
      },
      url: {
        add: '/material/add',
        exportXlsUrl: '/material/exportXls',
        deleteBatch: '/material/deleteBatch',
      },
      // 表头
      columns: [
        {
          title: '类型',
          align: 'center',
          dataIndex: 'type_dictText',
          width: 150,
        },
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name',
          width: 200,
        },
        {
          title: '编码',
          align: 'center',
          dataIndex: 'code',
          width: 150,
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'count',
          width: 100,
        },
        {
          title: '说明',
          align: 'center',
          ellipsis: true,
          dataIndex: 'remark',
          width: 300,
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status_dictText',
          width: 120,
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          width: 220,
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadDataList: (parameter) => {
        return getMaterials(Object.assign(parameter, this.queryParam)).then((res) => {
          if (res.success && res.result) {
            const obj = {
              data: res.result.records || [],
              pageNo: res.result.current,
              pageSize: res.result.size,
              totalCount: res.result.total,
              totalPage: res.result.page,
              sortColumns: res.result.sortColumns,
            }
            return obj
          } else {
            return {}
          }
        })
      },

      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  methods: {
    handleAdd() {
      this.$refs.MaterialModal.title = '添加'
      this.$refs.MaterialModal.add()
    },
    handleEdit(record) {
      this.$refs.MaterialModal.title = '编辑'
      this.$refs.MaterialModal.edit(record)
    },
    handleReview(record) {
      this.$refs.MaterialModal.review(record)
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    // 申请使用
    handleApply(record) {
      this.$refs.MaterialApplyModal.title = '场地和物资申请'
      this.$refs.MaterialApplyModal.create({
        materialId: record.id,
        materialName: record.name,
        materialCode: record.code,
        materialType: record.type,
        applierId: this.$store.getters.userInfo.id,
        realname: this.$store.getters.userInfo.realname,
      })
    },
    handleDelete(id) {
      delMaterial({ id }).then((res) => {
        if (res.success) {
          this.$message.success('删除成功')
          this.searchQuery()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    batchDel: function () {
      if (!this.url.deleteBatch) {
        this.$message.error('请设置api.leteBatch属性!')
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      } else {
        var ids = ''
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ','
        }
        var that = this
        this.$confirm({
          title: '确认删除',
          content: '是否删除选中数据?',
          onOk: function () {
            that.loading = true
            deleteAction(that.url.deleteBatch, { ids: ids })
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.selectedRowKeys = []
                  that.selectionRows = []
                  that.searchQuery()
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.loading = false
              })
          },
        })
      }
    },
    searchReset() {
      this.queryParam = {
        actStatus: 10,
      }
      this.searchQuery()
    },
    searchQuery() {
      this.$nextTick(() => {
        this.$refs.table.refresh()
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    onChange(row) {
      this.selectedRowKeys = row.selectedRowKeys
      this.selectedRows = row.selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
  },
}
</script>
